<template>
	<view class="content">
		<button @click="getLocation">获取位置</button>
		<button @click="directionDel">规划</button>
		<map id="map1" ref="map1" :polyline="polyline" :longitude="longitude" :latitude="latitude"
			class="map-mine"></map>
	</view>
</template>

<script>
	var QQMapWX = require('../../common/qqmap-wx-jssdk.js');
	export default {
		data() {
			return {
				title: 'Hello',
				longitude: 110.30731,
				latitude: 30.79726,
				contextMap: '',
				qqmapsdk: '',
				polyline: null
			}
		},
		onLoad() {
			this.qqmapsdk = new QQMapWX({
				key: ''
			})
			this.contextMap = uni.createMapContext('map1', this)
			console.log(this.contextMap)
			this.contextMap.getCenterLocation({
				success(res) {
					console.log(res)
				}
			})
		},
		methods: {
			directionDel() {
				let that = this;
				this.qqmapsdk.direction({
					mode: 'driving',
					from: {
						longitude: 110.30731,
						latitude: 30.79726
					},
					to: {
						longitude: 114.30731,
						latitude: 34.79726

					},
					success(res) {
						console.log(res)
						var ret = res;
						var coors = ret.result.routes[0].polyline,
							pl = [];
						//坐标解压（返回的点串坐标，通过前向差分进行压缩）
						var kr = 1000000;
						for (var i = 2; i < coors.length; i++) {
							coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
						}
						//将解压后的坐标放入点串数组pl中
						for (var i = 0; i < coors.length; i += 2) {
							pl.push({
								latitude: coors[i],
								longitude: coors[i + 1]
							})
						}
						
						that.polyline = [{
							points: pl,
							color: '#FF0000DD',
							width: 4
						}]
						console.log(that.polyline)
					}
				})
			},
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success(res) {
						console.log(res.latitude)
						console.log(res.longitude)
						// that.latitude = res.latitude
						// that.longitude = res.longitude
						that.contextMap.moveToLocation({
							longitude: res.longitude,
							latitude: res.latitude,
							success(res) {
								console.log(res)
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.map-mine {
		width: 100%;
		height: 50vh;
	}

</style>
